revision:
<div class="box">
<div class="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
<style>
.box {position: relative; width: 90vw; height: 30vw; padding: 1vw; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.clock {position: relative; width: 20vw; height: 20vw; background-image:repeating-conic-gradient( red 1deg, green 2deg, blue 3deg); background-position: center; background-repeat: no-repeat;
background-size: 20vw 20vw; border: 1vw outset burlywood; border-radius: 50%;}
.clock::before {content: ""; position: absolute; top: 9.5vw; left: 9vw; width: 0.8vw; height: 0.8vw; border-radius: 50%; background: #3D3935; z-index: 999;}
#hours {position: absolute; top: 3.3vw; left: 9vw; width: 0.5vw; height: 7vw; background: crimson; transform-origin: bottom;}
#minutes {position: absolute; top: 1.8vw; left: 9.25vw; width: 0.3vw; height: 8vw; background: orange; transform-origin: bottom;}
#seconds {position: absolute; top: 0.6vw; left: 9.35vw; width: 0.2vw; height: 11vw; background: black; transform-origin: 0 9vw;}
</style>
<script>
function startClock() {
const hr = document.getElementById("hours");
const min = document.getElementById("minutes");
const sec = document.getElementById("seconds");
let date = new Date();
let hh = date.getHours();
if(hh >= 12) {hh = hh - 12;}
let mm = date.getMinutes();
let ss = date.getSeconds();
hr.style.transform = "rotateZ(" + (hh*30 + mm*0.5) + "deg)";
min.style.transform = "rotateZ(" + mm*6 + "deg)";
sec.style.transform = "rotateZ(" + ss*6 + "deg)";
}
window.addEventListener('load', (event) => {
setInterval(startClock, 1000);
});
</script>
<div class="clock_B">
<div class="hour"><div class="hr" id="hr"></div></div>
<div class="min"><div class="mn" id="mn"></div></div>
<div class="sec"><div class="sc" id="sc"></div></div>
</div>
<style>
.clock_B {width: 30vw; height: 30vw; border-radius: 50%; margin: 0 auto;background-image: url("../images/21.jpg"); background-size: cover; display: flex; justify-content: center; align-items: center;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3), inset 0 15px 15px rgba(0, 0, 0, 0.3);}
.clock_B::before {content: ""; width: 15px; height: 15px; position: absolute;background-color: #fff; border-radius: 50%; z-index: 1000;}
.hour, .min, .sec { position: absolute;}
.hr {width: 16vw; height: 16vw;}
.mn {width: 19vw; height: 19vw;}
.sc {width: 23vw; height: 23vw;}
.hr, .mn, .sc {display: flex; justify-content: center;}
.hr::before {content: ""; width: 0.6vw; height: 9vw; background-color: black; z-index: 100; border-radius: 5px;}
.mn::before {content: ""; width: 0.6vw; height: 10vw; background-color: yellow; z-index: 11; border-radius: 5px;}
.sc::before { content: ""; width: 0.3vw; height: 14vw; background-color: red; z-index: 10; border-radius: 5px;}
</style>
<script>
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let deg = 6; //360deg / 60(min||sec) => 6
let day = new Date();
let hh = day.getHours() * 30; //360deg / 12 hour => 30
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
});
</script>
<div class="klok">
<div class="uur"><div class="ur" id="ur"></div></div>
<div class="minuut"><div class="mu" id="mu"></div></div>
<div class="sekonde"><div class="sek" id="sek"></div></div>
</div>
<script>
// for time;
let deg = 6; // 360 / (12 * 5);
const ur = document.querySelector('#ur');
const mu = document.querySelector('#mu');
const sek = document.querySelector('#sek');
setInterval(() => {
let day1 = new Date();
let hh1 = day1.getHours() * 30;
let mm1 = day1.getMinutes() * deg;
let ss1 = day1.getSeconds() * deg;
ur.style.transform = `rotateZ(${(hh1) + (mm1 / 12)}deg)`;
mu.style.transform = `rotateZ(${mm1}deg)`;
sek.style.transform = `rotateZ(${ss1}deg)`;
// gives the smooth transitioning effect, but there's a bug here!
// sc.style.transition = `1s`;
})
</script>
<style>
.klok {width: 30vw; height: 30vw; display: flex; justify-content: center; align-items: center; margin: 0 auto; background: url("../images/19.jpg"); background-size: cover; border: 0.4vw solid darkgreen;
box-shadow: 15px 15px 15px rgba(255, 255, 255, 0.5); border-radius: 50%;}
/* The small circle int the center */
.klok::before {content: ''; position: absolute; width: 15px; height: 15px; position: absolute; background: rgb(255, 255, 255); border-radius: 50%; z-index: 10000;}
.uur, .minuut, .sekonde {position: absolute;}
/* length of respective arms; */
.klok .uur, .ur {width: 16vw; height: 16vw;}
.klok .minuut .mu {width: 19vw; height: 19vw;}
.klok .sekonde .sek {width: 23vw; height: 23vw;}
.ur, .mu, .sek {display: flex; justify-content: center;}
.ur::before {content: ''; width: 0.6vw; height: 9vw; background: #f81460; z-index: 10; border-radius: 2.8px;}
.mu::before {content: ''; width: 0.6vw; height: 10vw; background: #ffffff; z-index: 11; border-radius: 3px;}
.sek::before {content: ''; width: 0.3vw; height: 14vw; background: cyan; z-index: 12; border-radius: 3px;}
</style>
<div class="grid_A">
<svg viewbox="0 0 500 500">
<circle id="a1" cx="50%" cy="50%" r="45%"/>
<circle id="a2" cx="50%" cy="50%" r="41%"/>
<circle id="a3" cx="50%" cy="50%" r="37%"/>
<span id="tijd"></span>
<span id="ampm"></span>
<span id="daay"></span>
<span id="ddmmyyyy"></span>
</svg>
<style>
svg{width: 40vw; height: 30vw; margin-left: 1vw; position:relative; left:30%; top:1%; transform:translateX(-30%); background-image: url("../images/19.jpg");}
circle{fill:crimson;stroke:cyan; stroke-width:12;transform-origin:50% 50%; stroke-linecap:round; stroke-dashoffset:300%; transform:rotate(-90deg);transition:1s linear;}
#tijd{position:absolute; font-size:2vw; padding:0.2vw; padding-left:1vw; padding-right:1vw; left:17%; top:55vw; border-radius:1vw; text-shadow:0px 0px 1px black; user-select:none;}
#a3{fill:seagreen;}
span{text-shadow:0px 0px 1px black; color:#def;}
#ampm{position:absolute; top:55.1vw; left:27%; font-size: 2vw;text-align:center;}
#ddmmyyyy{position:absolute;left:18%; top:59vw; font-size:1.6vw;}
#daay{position:absolute; left:18%; top:63vw; font-size:1.5vw;}
</style>
<script>
var am_pm,dayno;
//CALLS DATE PER 0.001S
setInterval(mngr,100);
//MANAGER
function mngr(){
progbar();
setTimeDate();
};
//ONE TIME CALL FOR DATE
dt();
//GET DATE TIME PM AM
function dt(retrnVal){
dateA= new Date();
a=dateA.getHours();
if (a>12){a-=12; am_pm ="PM";}
else{if(a==0){a=12;}; am_pm="AM";};
a=fx(a);
b=fx(dateA.getMinutes());
c=fx(dateA.getSeconds());
dayno=dateA.getDay();
day=fx("day");
date=fx(dateA.getDate());
month=fx(dateA.getMonth()+1);
year=dateA.getFullYear();
tym=a+":"+b+":"+c;
dmy=date+"/"+month+"/"+year;
return retrnVal;
};
//SMALL FIX FOR DATE
function fx(num){
if (num<=9){num="0"+num;};
if (num=="day"){
num=dayno;
switch (num){
case 1: num="Monday"; break;
case 2: num="Tuesday"; break;
case 3: num="Wednesday"; break;
case 4: num="Thursday"; break;
case 5: num="Friday"; break;
case 6: num="Saturday"; break;
case 0: num="Sunday"; break;
};
};
return num;
};
//SETS DATE, TIME, DAY
function setTimeDate(){
tijd.innerHTML=dt(tym);
ampm.innerHTML=am_pm;
daay.innerHTML=dt(day);
ddmmyyyy.innerHTML =dt(dmy);
};
//PROGRESS BAR
function progbar(){
a1.style.strokeDasharray=300+(dt(c)/60)*(584-300)+"%";
b = (dt(b)==0) ? 0.01 :dt(b);
a2.style.strokeDasharray=300+(b/60)*(556-300)+"%";
a = (dt(a)==12) ? 0.001 :dt(a);
a3.style.strokeDasharray=300+(a/12)*(533-300)+"%";
};
</script>